<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>置顶效果</title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        body {
            margin: 0;
            font-family: 'Microsoft YaHei';
        }
        
        .content {
            width: 100%;
            height: 2000px;
            background: -moz-linear-gradient(top, #E2FFFE 0%, lightskyblue 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #E2FFFE), color-stop(100%, lightskyblue));
            background: -webkit-linear-gradient(top, #E2FFFE 0%, lightskyblue 100%);
            background: -o-linear-gradient(top, #E2FFFE 0%, lightskyblue 100%);
            background: -ms-linear-gradient(top, #E2FFFE 0%, lightskyblue 100%);
            background: linear-gradient(to bottom, #E2FFFE 0%, lightskyblue 100%);
        }
        
        #stick {
            width: 100px;
            height: 80px;
            position: absolute;
            top: 0;
            right: 0;
        }
        
        #stick a {
            color: #fff;
            width: 100px;
            height: 40px;
            font-size: 20px;
            display: block;
            text-decoration: none;
            position: relative;
        }
        
        #stick a div {
            height: 40px;
            line-height: 40px;
            text-align: center;
            position: absolute;
        }
        
        #stick .top {
            width: 100%;
            background-color: #CF2045;
        }
        
        #stick .bottom {
            width: 100%;
            background-color: #333333;
        }
        
        #stick a div:nth-child(2) {
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            opacity: 0;
        }
        
        #stick a div:nth-child(1) {
            width: 15px;
            position: absolute;
            right: 0;
        }
        
        #stick a:nth-child(1) div:nth-child(1) {
            background-image: url(scroll.png);
        }
        
        #stick a:nth-child(2) div:nth-child(1) {
            background-image: url(scroll.png);
            background-position-y: 40px;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="show"><a href="02-置顶效果.html" target="_blank">模板示范</a></div>
    </div>
    <div id="stick">
        <!--scrollTo() 函数可以滚动到指定坐标(x, y)处的内容-->
        <a href="javascript:scrollTo(0,0);">
            <div></div>
            <div class="top hint">返回顶部</div>
        </a>
        <a href="javascript:scrollTo(0,2000);">
            <div></div>
            <div class="bottom hint">转到底部</div>
        </a>
    </div>
</body>

</html>

<script>
    setStickright();
    // 计算#stick的位置
    function setStickright() {
        var top = ($(window).height() - $('#stick').height()) / 2 + $(document).scrollTop();
        $('#stick').css({ top: top });
    }
    // 页面滚动事件
    $(window).scroll(function () {
        setStickright();
    })

    // 浏览器大小改变事件
    $(window).resize(function () {
        setStickright();
    })

    $('#stick a').hover(function () {
        $(this).find('.hint').stop().animate({ opacity: 1 }, 300);
    }, function () {
        $(this).find('.hint').stop().animate({ opacity: 0 }, 300);
    })

</script>